<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			body {
				background-color: #F2F2F2;
			}
			
			.header {
				width: 100%;
				height: 44px;
				background-color: rgb(255, 48, 63);
				text-align: center;
				line-height: 44px;
				color: white;
				font-size: 20px;
				margin-bottom: 25px;
			}
			.header a{
				color: white;
				position: absolute;
				left: 15px;
			}
			.header a span{
				font-size: 30px;
			}
			.loginWrap{
				padding: 0 3%;
			}
			.loginWrap button{
				width: 100%;
				height: 40px;
				font-size: 18px;
				margin: 0 auto;
				display: block;
				color: white;
				background-color:rgb(255, 48, 63) ;
			}
			.otherLogin{
				padding: 0 3%;
				margin-top: 35px;
			}
			.wbwrap{
				text-align: center;
				margin-bottom: 10px;				
			}
			.wbwrap a{
				width: 55px;
				height: 55px;
				border-radius: 55px;
				text-align: center;
				line-height: 55px;
				background-color: orange;
				margin: 0 auto;
			}
			.wbwrap a span{
				font-size: 40px;
			}
			.otherText{
				font-size: 13px;
				color: #AAAAAA;
			}
			.wbwrap>span{
				font-size: 13px;
				color: #555555;
			}
			.wbLogin{
				background-color: white;
				padding: 3% 3% 0;
				border-radius: 3px;
				margin-top: 10px;
			}
			.noUser{
				padding: 10px 0;
				border-top: 1px solid #F2F2F2;
				font-size: 13px;
			}
			.noUser a{
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="all">
			<div class="header">
				<a href="index.html"><span class="mui-icon mui-icon-undo"></span></a>
				<span>登录</span>
			</div>
			<div class="loginWrap">
				<input class="uNInput" type="text" name="userName" id="user" value="" placeholder="请输入邮箱/手机号"/>
				<p id="userP"></p>
				<input class="pWBtn" type="password" name="passWord" id="pass" value="" placeholder="请输入密码"/>
				<p id="passP"></p>
				<button>ok</button>
			</div>
			<div class="otherLogin">
				<span class="otherText">还可以选择以下方式登录</span>
				<div class="wbLogin">
					<div class="wbwrap">
						<a href="" style="display: block;"><span class="mui-icon mui-icon-weibo" style="color: white;font-size: 35px;"></span></a>
						<span>新浪微博登录</span>
					</div>
					<p class="noUser">没有账号?<a href="register.html">注册网易新闻账号</a></p>
				</div>
				
			</div>
		</div>
		<script type="text/javascript">
		$('button').bind('click',function(){
			$(function(){
				$.ajax({
					type:"POST",
					url:"login.php",
					data:{
						user:$('#user').val(),
						pass:$('#pass').val()
					},
					success:function(responseText){
						var obj = JSON.parse(responseText);
						console.log(obj);
						if(obj.error){
							document.getElementById('passP').innerHTML = '账号或密码错误';
						}else{
							window.location.href = 'index.html?name='+obj.info+'&imgUrl='+obj.headUrl;	
						}
						
					}
		})
			
				});
				
				
				
				
				
				
				
				
				
			})
		</script>
	</body>

</html>